<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/datepicker/datepicker.js" charset="utf-8"></script>
<style>
<!--
label.error{
 line-height:22px;
}
-->
</style>
<div id="datepickerDemo">
    <div title='API' tabid='tab1'>
       <div>
				<h2>1，带 时间 的日期控件：</h2>
				<h3 style="padding-left:30px">&lt;input type="text" id="xxx" class="init ccay-calendar date" format="date"/></h3>
				<h2>2，带 日期+时间 的日期控件：</h2>
				<h3 style="padding-left:30px">&lt;input type="text" id="xxx" class="init ccay-calendar datetime" format="datetime"/></h3>
				<h2>3，带时区的日期控件：</h2>
				<h3 style="padding-left:30px">&lt;input type="text" timezone=true  id='DateTimepicker1' class="init ccay-calendar"/></h3>  
				<h2>4，获取服务器当前时间：</h2>
				<h3 style="padding-left:30px">Ccay.Core.getServerTime( )</h3>  
				
				<h3 style="padding-top:30px">作用：生成日期控件,进行选择日期时间，支持手动输入，必须格式一致，否则校验不通过。</h3>
				<h3 style="padding-top:10px;padding-bottom:10px;color:red">注意：必须有id属性设置，否则控件使用不了。</h3>				
				
				<form id="param" class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">
						<ul>
						
						    <li class="ccay-form-row">
						        <samp><h3>参数</h3></samp>
								<span class="ccay-form-input">
									<h3>描述</h3>
								</span>
							</li>
									
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="type"></samp>							    
								<span class="ccay-form-input">必须指定：type="text" </span>
						    </li>

							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="class"></samp>
							    <span class="ccay-form-input">必须指定：class="init ccay-calendar"，来初始化。<p>可设置class中添加date或datetime来进行date或datetime类型的日期进行校验。</span>
							</li>

							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="format"></samp>
							    <span class="ccay-form-input">
									必须指定，生成控件的类型，有两种：
									<p>1,format="date":日期 
									<p>2,format="datetime"：日期+时间
							    </span>
							</li>
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="defaultdate"></samp>
							    <span class="ccay-form-input">defaultdate可用来设置显示默认时间。</span>
							</li>
							
				    </ul>
			   </div>
		    </form>
			</div>
				    
    </div>	
	<div title='日期+时间' tabid='tab2'>
		<h4><span>实例1：日期+时间</span></h4>
		<form class="init ccay-form">
		<div style='padding-left:30px'>
			<div class='demo'>
			    <input type="text" id="dateTime" class="init ccay-calendar datetime" format="datetime"/>
			</div>
			<div class="codeArea">
				<pre id='html1'>&lt;input type="text" id='DateTimepicker1' class="init ccay-calendar datetime" format="datetime"/></pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#datepickerDemo','',$('#html1').text())">亲自试一试</a>
			</div>
        </div>
        </form>
        
        <h4><span>实例2：日期+时间(带秒数)</span></h4>
		<form class="init ccay-form">
		<div style='padding-left:30px'>
			<div class='demo'>
			    <input type="text" id="dateTime2" class="init ccay-calendar datetime" format="datetime" showSecond=true/>
			</div>
			<div>
				<span>说明：生成日期+时间控件。如需要生成带秒数的时间，需设置<font color="red">showSecond=true</font></span>
			</div>
			<div class="codeArea">
				<pre id='html8'>&lt;input type="text" id='DateTimepicker2' class="init ccay-calendar datetime" format="datetime" showSecond=true/></pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#datepickerDemo','',$('#html8').text())">亲自试一试</a>
			</div>
        </div>
        </form>
        
        <h4><span>实例3：日期+默认时间</span></h4>
		<form class="init ccay-form">
		<div style='padding-left:30px'>
			<div class='demo'>
			    <input type="text" id="dateDefault" class="init ccay-calendar date" format="date" defaultdate="2012-12-12"/>
			</div>
			<div class="codeArea">
				<pre id='html11'>&lt;input type="text" id="dateDefault" class="init ccay-calendar date" format="date" defaultdate="2012-12-12"/></pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#datepickerDemo','',$('#html11').text())">亲自试一试</a>
			</div>
        </div>
        </form>
        
        <h4><span>实例3：日期+时间+默认时间</span></h4>
		<form class="init ccay-form">
		<div style='padding-left:30px'>
			<div class='demo'>
			    <input type="text" id='datetimeDefault' class="init ccay-calendar datetime" format="datetime"  defaultdate="2012-12-12 12:12"/>
			</div>
			<div class="codeArea">
				<pre id='html111'>&lt;input type="text" id='datetimeDefault' class="init ccay-calendar datetime" format="datetime"  defaultdate="2012-12-12 12:12"/></pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#datepickerDemo','',$('#html111').text())">亲自试一试</a>
			</div>
        </div>
        </form>
        
	</div>
	<div title='日期+时间+时区' tabid='tab12'>
		<h4><span>实例1：日期+时间+时区</span></h4>
		<form class="init ccay-form">
		<div style='padding-left:30px'>
			<div class='demo'>
			    <input type="text" id="dateTime11" timezone=true class="init ccay-calendar datetime" format="datetime"/>
			</div>
			<div>
				<span>加时区需加上timezone=true</font><br>
				</span>
			</div>
			<div class="codeArea">
				<pre id='html111'>&lt;input type="text" timezone=true  id='DateTimepicker1' class="init ccay-calendar datetime" format="datetime" timezone="true" /></pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#datepickerDemo','',$('#html111').text())">亲自试一试</a>
			</div>
        </div>
        </form>
        
        <!-- ---------------------------  -->
        <h4><span>实例2：日期+时间+时区</span></h4>
		<form class="init ccay-form">
		<div style='padding-left:30px'>
			<div class='demo'>
			    <input type="text" id="dateTime12" timezone=true class="init ccay-calendar datetime" format="datetime" timezoneop="true" />
			</div>
			<div>
				<span>
					  想让日期控件中的时区不同步到个性化，然而个性化的设置同步的日期控件中  加这个属性<font style="color:red">timezoneop="true"</font>
				</span>
			</div>
			<div class="codeArea">
				<pre id='html112'>&lt;input type="text" timezone=true  id='DateTimepicker2' class="init ccay-calendar datetime" format="datetime" timezone="true" timezoneop="true" /></pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#datepickerDemo','',$('#html112').text())">亲自试一试</a>
			</div>
        </div>
        </form>
        
        
        
	</div>	
    <div title='日期' >
   		<h4><span>实例2：日期</span></h4>
   		<form class="init ccay-form">
		<div style='padding-left:30px'>
			<div class='demo'>
			    <input type="text" id='Datepicker' class="init ccay-calendar date" format="date"/>		   
			</div>    
			<div>
				<span>说明：生成日期控件</span>
			</div>
			<div class='codeArea'>
				<pre id='html2'>&lt;input type="text" id='Datepicker1' class="init ccay-calendar date" format="date"/></pre>
			</div>

			<div class='try'>
				<a onclick="Ccay.example.openTry('#datepickerDemo','',$('#html2').text())">亲自试一试</a>
			</div>
	 	</div>
	 	</form>	
    </div>
    <div title='禁用和开启' >
   		<h4><span>实例3：控件的禁用和开启</span></h4>
   		<form class="init ccay-form">
		<div style='padding-left:30px'>
		    <div class='demo'>
			    <input type="text" id='DateTimepicker2' class="init ccay-calendar datetime" format="datetime"/>  
			    <span class="ccay-button" onclick="$('#DateTimepicker2').ccayDisabled(1);" >
			    	<a class="ccay-icon confirm"></a>
			    	<label>开启</label>
			    </span>
			    <span class="ccay-button" onclick="$('#DateTimepicker2').ccayDisabled();" >
			    	<a class="ccay-icon cancel"></a>
			    	<label>禁用</label>
			    </span>
			   <!--  
			    <input type="button" class="button" onclick="$('#DateTimepicker2').ccayDisabled(1);" value="开启" />
			    <input type="button" class="button" onclick="$('#DateTimepicker2').ccayDisabled();" value="禁用" />
			     -->
			</div>    
			<div>
				<span>说明：控件的手工禁用和开启，enable：传入该参数则启用控件，否则禁用</span>
			</div>
			<div class='codeArea'>
				<pre id='html3'>$("id").ccayDisabled(enabled)</pre>
			</div>
		</div>
		</form>
    </div>
    <div title='取值和设值' >
   		<h4><span>实例4：控件的设置value</span></h4>
   		<form class="init ccay-form">
		<div style='padding-left:30px'>
			<div class='demo'>
			     <input type="text" id='Datepicker2' class="init ccay-calendar date" format="date"/> 
			     <span class="ccay-button" onclick="alert($('#Datepicker2').ccayGetValue())">
			     	<a class="ccay-icon confirm"></a>
			     	<label>取值</label>
			     </span>
			     <span class="ccay-button" onclick="$('#Datepicker2').ccaySetValue('2012-12-12')">
			     	<a class="ccay-icon edit"></a>
			     	<label>设置值</label>
			     </span>
			</div>    
			<div>
				<span>说明：给控制直接设置value，
				     <p><h3>1,$("#id").ccaySetValue(value)</h3>  给页面的各个输入数据组件设置value值，包括文本框，文本域，下拉框，日期控件，人员联想框等。
				     <p><h3>2,$("#id").ccayGetValue()</h3>  从页面的各个输入数据组件取到value值，包括文本框，文本域，下拉框，日期控件，人员联想框等。
				     <p>如：$('#txtDatepicker').ccaySetValue('2012-12-12')    和    $('#txtDateTimepicker').ccaySetValue('2012-12-12 20:00')</span>
			</div>
			<div class='codeArea'>
				<pre id='html4'>//设置value值<p>$("#id").ccaySetValue(value);<p>//取得value值<p>$("#id").ccayGetValue()</pre>
			</div>
		</div>
		</form>
    </div>
    <div title='年月选择' >
   		<h4><span>实例5：年月选择</span></h4>
   		<form class="init ccay-form">
			<div style='padding-left:30px'>
				<div class='demo'>
				     <input type="text"  name="Datepicker3" id="Datepicker3"  class="init ccay-calendar dateym"  format="yyyy-MM" showDate=false />
				</div>    
				<div class='codeArea'>
					<pre id='html5'><p>&lt;input type="text"  name="xxx" id="xxx"  class="init ccay-calendar"  format="yyyy-MM" showDate=false />
					<p>//需设置format和showDate属性<p>format="yyyy-MM"<p>showDate=false </pre>
				</div>
			</div>
		</form>
    </div>
    <div title='范围设置' >
  		<h4><span>实例6：范围限制</span></h4>
  		<form class="init ccay-form">
		<div style='padding-left:30px'>
			<div class='demo'>
			     <input type="text"  name="date6"  class="init ccay-calendar date" wmindate="2012-9-20" wmaxdate="2013-10-20"  />
			</div>    
			<div class='codeArea'>
				<pre id='html6'><p>&lt;input type="text"  name="XXX"  class="init ccay-calendar date" wmindate="2012-9-20" wmaxdate="2013-10-20"  />
				<p>//需设置wmindate和wmaxdate属性,也可单独设置一个<p>wmindate="2012-9-20"<p>wmaxdate="2013-10-20" 
				<p>//注意：datetime类型的时间设置一样
				</pre>
			</div>
		</div>	
		</form>
		<h4>
			<span>实例6-2：动态开始日期-结束日期</span>
		</h4>
		<form class="init ccay-form">
			<div style='padding-left: 30px'>
				<div class='demo'>
					开始日期：<input type="text" id="date6_start" name="date6_start"
						class="init ccay-calendar date" onchange="_date6_start()" /> -
					结束日期：<input type="text" id="date6_end" name="date6_end"
						class="init ccay-calendar date" onchange="_date6_end()" />
				</div>
				<h3>html Code</h3>
				<span></span>
				<div class='codeArea'>
					<xmp id='demo_html8'> 开始日期：<input type="text"
						id="date6_start_demo" name="date6_start_demo"
						class="init ccay-calendar date" onchange="_date6_start_demo()" />
					- 结束日期：<input type="text" id="date6_end_demo" name="date6_end_demo"
						class="init ccay-calendar date" onchange="_date6_end_demo()" /></xmp>
				</div>
				<h3>js Code</h3>
				<span></span>
				<div class='codeArea'>
					<pre id='demo_js8'>
			_date6_start_demo = function(){
				var minValue = $("#date6_start_demo").val();
				if(minValue){
					$("#date6_end_demo").attr("wmindate",minValue);
				}else{
					$("#date6_end_demo").removeAttr("wmindate");
					var op = $("#date6_end_demo").data("XCalendar_op");
					op.wmindate = new Date( 1900, 0, 1 );
				}
			};
			_date6_end_demo = function(){
				var maxValue = $("#date6_end_demo").val();
				if(maxValue){
					$("#date6_start_demo").attr("wmaxdate",maxValue);
				}else{
					$("#date6_start_demo").removeAttr("wmaxdate");
					var op = $("#date6_start_demo").data("XCalendar_op");
					op.wmaxdate = new Date( 9999, 11, 31 );
				}
			};
			</pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#datepickerDemo',$('#demo_js8').html(),$('#demo_html8').html())">亲自试一试</a>
				</div>
			</div>
		</form>
    </div>
    <div title='双月选择' >
   		<h4><span>实例7：双月选择</span></h4>
   		<form class="init ccay-form">
		<div style='padding-left:30px'>
			<div class='demo'>
			     <input type="text"  name="date7"  class="init ccay-calendar date" dblmonth="next"  format="date"/>
			</div>    
			<div class='codeArea'>
				<pre id='html7'><p>&lt;input type="text"  name="xxx"  class="init ccay-calendar date" dblmonth="next"  format="date"/>
				<p>//需设置dblmonth属性
				<p>当月和下个月：dblmonth="next"
				<p>上个月和当月：dblmonth="prev"</pre>
			</div>
		</div>
		</form>
	</div>
    <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
	  <form class="init ccay-form">
	    <div class="ccay-form-body">
			<ul>
			</ul>
		</div>		
		<div class="ccay-form-custom">
			<ul>						
			    <li class="ccay-form-row">
			        <samp><h3>问题</h3></samp>
					<span class="ccay-form-input">
						<h3>解决方案</h3>
					</span>
				</li>
				<!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
				<li class="ccay-form-row ccay-form-whole">
					<samp class="i18n" i18nKey="1.为什么日期控件的校验不起作用？"></samp>							    
					<span class="ccay-form-input">控件必须在form里面才能校验。且要指定class="date" 或"datetime"来进行相应类型的校验</span>
				</li>	
			</ul>
		</div>
	  </form>						
	</div>	
</div>	 
